<template>
<div class="container">
    <Carousel></Carousel>
    <div class="table-row">
      <div>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="text-align: center">
          <el-tab-pane label="推荐" name="first">
            <Recomend></Recomend>
          </el-tab-pane>
          <el-tab-pane label="作品" name="second" >
            <Original></Original>
          </el-tab-pane>
          <el-tab-pane label="教程" name="third">
            <Course></Course>
          </el-tab-pane>
          <el-tab-pane label="专题" name="fourth">
            <SpecialTopic></SpecialTopic>
          </el-tab-pane>
          <el-tab-pane label="动态" name="fifth">
            <Information></Information>
          </el-tab-pane>
          <el-tab-pane label="关注" name="sixth">
            <Attention></Attention>
          </el-tab-pane>

        </el-tabs>
      </div>

    </div>
</div>
</template>

<script setup lang="ts">
import Attention from '@/views/resources/components/attention/index.vue';
import Course from '@/views/resources/components/course/index.vue';
import Information from '@/views/resources/components/information/index.vue';
import Original from '@/views/resources/components/original/index.vue';
import Recomend from '@/views/resources/components/recomend/index.vue';
import SpecialTopic from '@/views/resources/components/specialTopic/index.vue'
import {onMounted, ref} from 'vue'
import type { TabsPaneContext } from 'element-plus';


const outerVisible = ref(false)
const innerVisible = ref(false)
import Carousel from '@/views/resources/Carousel/index.vue'
const activeName = ref('first')
const pageSize = ref(20);
const pageNum = ref(0);
const column = ref<any>('original')
const handleClick = (tab: TabsPaneContext, event: Event) => {

  console.log(tab, event)
}


</script>

<style scoped>
.container {
  width: 1200px;
  margin:0 auto;

}

.demo-tabs::v-deep {
  text-align: center;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}

</style>
